<template>
	<view class="uni_box home">
		<navbar title='上传项目'  backColor="#fff" :backgroundColor="Themecolor">
		</navbar>
		<view class="content">
			<view class="upone">
				<u-steps style="width: 100%;" :list="numList" :current="current" mode="number" :active-color="Themecolor"></u-steps>
			</view>
			<view class="uptwo mb">
				<view class="uptit">
					<text class="shu"></text>
					<text class="tname">请输入项目标题</text>
				</view>
				<view class="upitems">
					<view class="uput">
						<u-input class="uinput" v-model="name" type="text" :border="border" placeholder='请输入项目标题,例:商城UniAPP源码' />
					</view>
				</view>
			</view>
			<view class="uptwo mb">
				<view class="uptit">
					<text class="shu"></text>
					<text class="tname">请选择开发的语言或技术</text>
					<text class="tmiao">(可多选)</text>
				</view>
				<view class="upitems flwap">
					<u-tag v-for="(item,index) in taglist" :key="index" class="tags" :text="item.name" :mode="item.isselect?'dark':'plain'" :color="item.isselect?'#fff':Themecolornone" :bg-color="item.isselect?Themecolor:'#fff'" :show="true" :border-color="item.isselect?Themecolor:Themecolornone" @click="tagClick(item.id)" />
					<!-- <u-tag class="tags" text="H5" mode="plain" :color="Themecolor" :border-color="Themecolor" /> -->
				</view>
			</view>
			
			<view class="uptwo mb">
				<view class="uptit">
					<text class="shu"></text>
					<text class="tname">请输入源码描述</text>
				</view>
				<view class="upitems">
					<view class="uputtwo">
						<u-input class="uinput" v-model="name" type="textarea" :border="border" placeholder='请输入项目描述' />
					</view>
				</view>
			</view>
			<view class="uptwo mb">
				<view class="uptit">
					<text class="shu"></text>
					<text class="tname">添加封面图片</text>
				</view>
				<view class="upitems flwap">
					<view class="tuview">
						<image class="chuanimg" src="/static/navfive.png" />
						<text class="tianjia">添加图片</text>
					</view>
					<view class="tuview chaun">
						<image class="chuanimg" src="/static/navfive.png" />
						<view class="shanview">
							<image class="cha" src="/static/navfive.png" />
						</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '必填资料'
				}, {
					name: '选填资料'
				}, {
					name: '上传成功'
				}],
				current:0,
				name:'',
				border:false,
				Themecolornone:'#857e7e',
				taglist:[
					{id:1,name:"H5",isselect:false},
					{id:2,name:"CSS",isselect:false},
					{id:3,name:"JS",isselect:false},
					{id:4,name:"Android",isselect:false},
					{id:5,name:"PHP",isselect:false},
					{id:6,name:"IOS",isselect:false},
					{id:7,name:"UNIAPP",isselect:false},
					{id:8,name:"JAVA",isselect:false},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			tagClick(id){
				let taglist = this.taglist
				for(let i in taglist){
					if(taglist[i].id == id){
						taglist[i].isselect = !taglist[i].isselect
					}
				}
				this.taglist = taglist
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F8F8F8;
	}
	.content{
		background-color: #F8F8F8;
		.upone{
			display: flex;
			flex-direction: row;
			width: 100%;
			position: relative;
			padding:30rpx 20rpx;
		}
		.uptwo{
			padding: 30rpx;
			background-color: #fff;

		}
		.mb{
			margin-bottom: 20rpx;
		}
		.uptit{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.shu{
				width: 8rpx;
				height: 30rpx;
				background: $Themecolor;
				display: inline-block;
				margin-right: 10rpx;
			}
			.tname{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #444444;
			}
			.tmiao{
				display: inline-block;
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.uput{
			height: 80rpx;
			background: #F8F8F8;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30rpx;
		}
		.uputtwo{
			// height: 80rpx;
			background: #F8F8F8;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 10rpx 30rpx;
			// min-height: 180rpx;
		}
		.tuview{
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx #EEEEEE;
			border-radius: 10rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.chuanimg{
				width: 57rpx;
				height: 51rpx;
			}
			.tianjia{
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				display: block;
				margin-top: 10rpx;
			}
		}
		.chaun{
			position: relative;
			.chuanimg{
				width: 100%;
				height: 100%;
				// position: absolute;

			}
			.shanview{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.cha{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.flwap{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.tags{
			min-width: 150rpx;
			text-align: center;
			// height: 55rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 7px 11px;
		}
	}
</style>
